<template>
	<view>
		<!-- <uv-navbar title="" :autoBack="true" :placeholder="true" ></uv-navbar> -->
		<div style="height: 50rpx;background:#fff"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('添加员工')}}
		</div>
		<view class="emlp_head">
			<view class="name">
				{{$t('头像')}}
			</view>
			<!-- <image class="ico_ph" src="/static/img/ph_head.png" mode="aspectFill"></image> -->
			<view class="">
				<uv-upload :fileList="fileList1" name="1" multiple :maxCount="1" @afterRead="afterRead"
					@delete="deletePic" width="90rpx" height="90rpx">
					<image v-if="img != ''" class="ico_ph" :src="img" mode="widthFix"
						style="width: 90rpx;height: 90rpx;">
					</image>
				</uv-upload>
			</view>

			<uv-icon name="arrow-right" color="#8C8C8C" size="30rpx"></uv-icon>
		</view>

		<view class="emlp_info">
			<view class="item" @click="openEdit(0)">
				<view class="name">
					{{$t('姓名')}}
				</view>
				<view class="text">
					{{ name }}
				</view>
				<uv-icon name="arrow-right" color="#8C8C8C" size="30rpx"></uv-icon>
			</view>
			<view class="item" @click="openEdit(1)">
				<view class="name">
					{{$t('手机号')}}
				</view>
				<view class="text">
					{{ phone }}
				</view>
				<uv-icon name="arrow-right" color="#8C8C8C" size="24rpx"></uv-icon>
			</view>
			<view class="item" @click="openPickerEmplType">
				<view class="name">
					{{$t('员工身份')}}
				</view>
				<view class="text">
					{{ identity || $t('请选择') }}
				</view>
				<uv-icon name="arrow-right" color="#8C8C8C" size="24rpx"></uv-icon>
			</view>
			<view class="item" @click="openEdit(2)">
				<view class="name">
					{{$t('密码')}}
				</view>
				<view class="text">
					{{ editPassword }}
				</view>
				<uv-icon name="arrow-right" color="#8C8C8C" size="24rpx"></uv-icon>
			</view>
			<view class="item" @click="openPicker">
				<view class="name">
					{{$t('当前状态')}}
				</view>
				<view class="text">
					{{ state || $t('请选择') }}
				</view>
				<uv-icon name="arrow-right" color="#8C8C8C" size="24rpx"></uv-icon>
			</view>
		</view>

		<view class="footer_none"></view>
		<view class="footer_btn" @click="sub()">
			<view class="btn">
				{{$t('确定')}}
			</view>
		</view>


		<uv-popup ref="popupEdit" mode="bottom" round="10" @change="changeEdit">
			<view class="edit_info">
				<view class="title">
					<view class="btn_close" @click="closeEdit">
						{{$t('取消')}}
					</view>
					<view class="name" v-if="editIndex == 0">
						{{$t('姓名')}}
					</view>
					<view class="name" v-if="editIndex == 1">
						{{$t('手机号')}}
					</view>
					<view class="name" v-if="editIndex == 2">
						{{$t('密码')}}
					</view>
					<view class="btn_ok" @click="closeEdit">
						{{$t('保存')}}
					</view>
				</view>

				<view class="name_input" v-if="editIndex == 0">
					<uv-input :placeholder="$t('请输入')" border="surround" v-model="editName" fontSize="30rpx"
						:customStyle="{ background: '#fff', height: '90rpx' }"></uv-input>
				</view>

				<view class="name_input" v-if="editIndex == 1">
					<uv-input type="number" :placeholder="$t('请输入')" border="surround" v-model="editPhone" fontSize="30rpx"
						:customStyle="{ background: '#fff', height: '90rpx' }"></uv-input>
				</view>

				<view class="name_input" v-if="editIndex == 2">
					<uv-input type="text" :placeholder="$t('请输入您的密码')" border="surround" v-model="editPassword"
						fontSize="30rpx" :customStyle="{ background: '#fff', height: '90rpx' }"></uv-input>
					<uv-input type="text" :placeholder="$t('请确定您的密码')" border="surround" v-model="editPassword2"
						fontSize="30rpx" :customStyle="{ background: '#fff', height: '90rpx' }"></uv-input>
				</view>

			</view>
		</uv-popup>

		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirm"></uv-picker>

		<uv-picker ref="pickerEmplType" :columns="columnsEmplType" keyName="label"
			@confirm="confirmEmplType"></uv-picker>


	</view>
</template>

<script>
import { staff_type_select } from '@/api/basic.js'
import { staff_state } from '@/api/basic.js'
import { staff_add } from '@/api/basic.js'
export default {
	data() {
		return {
			fileList1: [],
			columns: [
				[
					{
						label: this.$t('空闲'),
						id: 2
					},
					{
						label: this.$t('工作中'),
						id: 1
					},

					{
						label: this.$t('停工'),
						id: 3
					}
				]
			],
			columnsEmplType: [
				[
					{
						label: '员工身份1',
						id: 1
					},
					{
						label: '员工身份2',
						id: 2
					},
					{
						label: '员工身份3',
						id: 3
					}
				]
			],

			name: '',
			phone: '',
			identity: '',
			identity_id: '',
			password: '',
			state: '',
			state_id: '',
			editIndex: 0,
			editName: '',
			editPhone: '',
			editPassword: '',
			editPassword2: '',
			lang: 'zh',
			img: '',
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',

			id: 0
		}
	},
	onLoad(options) {
		this.lang = uni.getStorageSync('lang')
		this.staffTypeSelect();

		if (options.item) {
			var json = JSON.parse(options.item)
			this.id = json.id
			if (this.lang == 'zh') {
				this.name = json.title;
				this.identity = json.type_info.title;
			} else {
				this.name = json.title_ru;
				this.identity = json.type_info.title_ru;
			}

			this.phone = json.phone
			this.identity_id = json.type
			this.password = json.password
			this.editName = this.name
			this.editPhone = this.phone

			this.state = json.state_name
			this.state_id = json.state

			this.editPassword = json.password
			this.editPassword2 = json.password
			if (json.attachment) {
				this.img = json.attachment.path
				this.fileList1.push({
					url: json.attachment.path
				})
			}

		} else {
			this.name = '';
			this.phone = '';
			this.identity = '';
			this.identity_id = '';
			this.password = '';

			if (this.lang == 'zh') {
				this.state = this.$t('空闲');
			} else {
				this.state = 'Выбрать город';
			}

			this.state_id = '2';
			this.editPassword = '';
			this.editPassword2 = '';
			this.img = '';
		}
	},
	methods: {
		back() {
			// uni.navigateBack()
			this.cback()
		},

		openEdit(index) {
			if (index == 1) {
				if (this.id != 0) {
					uni.showModal({
						content: '手机号暂不支持修改哦'
					})
					return false
				}
			}

			this.$refs.popupEdit.open();

			this.editIndex = index
			if (index == 0) {
				this.editName = this.name
			}
			if (index == 1) {
				this.editPhone = this.phone
			}
		},
		closeEdit() {
			this.$refs.popupEdit.close();
			if (this.editIndex == 0) {
				this.name = this.editName
			}
			if (this.editIndex == 1) {
				this.phone = this.editPhone
			}

		},
		saveEdit() {
			if (this.editIndex == 0) {
				if (!this.editName) {
					return
				}
			}
			this.$refs.popupEdit.close();
		},
		changeEdit(e) {
			console.log('弹窗状态改变：', e);
		},
		openPicker() {
			this.$refs.picker.open();
		},
		confirm(e) {
			this.state = e.value[0].label
			this.state_id = e.value[0].id
		},
		openPickerEmplType(index) {
			this.$refs.pickerEmplType.open();
		},
		confirmEmplType(e) {
			this.identity = e.value[0].label
			this.identity_id = e.value[0].id
		},

		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
			this.img = ''
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: this.$t('上传中')
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}

			console.log(this.fileList1);

		},
		uploadFilePromise(url) {
			var that = this;
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						var json = JSON.parse(res.data)
						that.img = json.data.fullurl;
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},

		//员工类型选择
		staffTypeSelect() {
			var that = this
			staff_type_select().then(res => {
				var list = res.data.data.data;
				var cou = list.length
				if (this.lang == 'zh') {
					var arr = [{
						label: this.$t('请选择'),
						id: ''
					}]
				} else {
					var arr = [{
						label: 'Выбрать город',
						id: ''
					}]
				}
				for (var i = 0; i < cou; i++) {
					if (this.lang == 'zh') {
						arr.push({
							id: list[i].id,
							label: list[i].title,
						})
					} else {
						arr.push({
							id: list[i].id,
							label: list[i].title_ru,
						})
					}
				}
				that.columnsEmplType = [arr]
				if (!this.id) {
					this.identity = arr.find(item => item.id == 32).label;
					this.identity_id = 32
				}
				console.log(this.columnsEmplType);

			})
		},
		//{{$t('确定')}}{{$t('按钮')}}
		sub() {
			//{{$t('头像')}}
			if (this.img == '') {
				uni.showModal({
					content: $t('请上传头像')
				})
				return false
			}
			if (this.editName == '') {
				uni.showModal({
					content: '请输入姓名'
				})
				return false
			}
			//{{$t('姓名')}}{{$t('长')}}度
			if (this.editName.length < 2) {
				uni.showModal({
					content: '姓名长度不能小于2位'
				})
				return false
			}
			if (this.identity_id == '') {
				uni.showModal({
					content: '请选择身份'
				})
				return false
			}
			if (this.editPhone.length < 8) {
				uni.showModal({
					content: '请输入正确的手机号'
				})
				return false
			}

			if (this.editPassword == '') {
				uni.showModal({
					content: '请输入密码'
				})
				return false
			}

			if (this.editPassword != this.editPassword2) {
				uni.showModal({
					content: '两次密码不一致'
				})
				return false
			}
			//{{$t('密码')}}{{$t('长')}}度
			if (this.editPassword.length < 8) {
				uni.showModal({
					content: '密码长度不能小于8位'
				})
				return false
			}

			var param = {
				'id': this.id,
				'title': this.editName,
				'phone': this.editPhone,
				'image': this.img,
				'type': this.identity_id,
				'state': this.state_id,
				'password': this.editPassword,
				'user_id': uni.getStorageSync('user_id'),
				'lang': this.lang
			}
			console.log(param)
			staff_add(param).then(res => {
				if (res.data.code == '200') {
					uni.showModal({
						content: $t('操作成功')
					})
					setTimeout(function () {
						uni.navigateBack();
					}, 2000)
				} else {
					uni.showModal({
						content: res.data.message
					})
					return;
				}
			})
		}
	}
}
</script>

<style lang="scss">
:deep(.uv-upload__wrap__preview) {
	margin: 0;
	margin-right: 10rpx;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background: #fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.edit_info {
	width: 100%;
	height: 60vh;
	background: #F6F7FB;

	.name_input {
		padding: 0 30rpx;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		padding: 0 40rpx;

		.name {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 40rpx;
		}

		.btn_close {
			font-size: 32rpx;
			line-height: 40rpx;
		}

		.btn_ok {
			color: #278AFF;
			font-size: 32rpx;
			line-height: 40rpx;
		}
	}
}

.emlp_info {
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 10rpx 0;

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 24rpx;

		.name {
			flex-shrink: 0;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #535353;
			margin-right: auto;
		}

		.text {
			font-size: 28rpx;
			line-height: 30rpx;
			font-weight: bold;
			padding-right: 10rpx;
		}
	}
}

.emlp_head {
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;

	.name {
		flex-shrink: 0;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: auto;
	}

	.ico_ph {
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
		margin-right: 10rpx;
	}
}


.navbar_right {
	color: #278AFF;
	font-size: 24rpx;
	line-height: 40rpx;
}

.footer_none {
	width: 100%;
	height: 210rpx;
}

.footer_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}

.footer_btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 0 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn_red {
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color: #FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.btn_gray {
		width: 100%;
		height: 110rpx;
		background: #C6C6C6;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}

.footer_big_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 0 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn_red {
		flex-shrink: 0;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #FF6456;
		font-size: 32rpx;
	}

	.btn_yellow {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		font-size: 32rpx;
	}
}

.footer_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.btn1 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #fff;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 1rpx solid #8C8C8C;
	}

	.btn2 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #F7F7F7;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
	}
}
</style>
